/* 未读计数器 */
<template>
	<view
		v-if="count"
		:style="{
			'height': `${size}px`,
			'min-width': `${size}px`,
			'line-height': `${size}px`,
			'background-color': getBgColor
		}"
		class="unread"
	>
		{{showCount}}
	</view>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 20
    },
    type: {
      type: String,
      default: 'error'
    },
    maxCount: {
      type: Number,
      default: 99
    }
  },
  computed: {
    getBgColor() {
      const map = {
        primary: '#f5c789',
        error: '#dd524d'
      }

      return map[ this.type ]
    },
    showCount() {
      if (this.count < this.maxCount) {
        return this.count
      }
      return `${ this.maxCount }+`
    }
  }
}
</script>

<style lang="scss" scoped>
.unread {
  display: inline-block;
  padding: 0 5px;
  font-size: $sMini;
  color: #ffffff;
  text-align: center;
  border-radius: 22px;
}
</style>
